<script setup lang="ts">
import { onActivated, ref } from 'vue';

import {
  reqAccountList,
  reqGroupList,
  reqPlatformList,
} from '#/api/exchange-center';
import { useOrderStore } from '#/store/order';

// import accountList from './components/AccountList.vue';
import FollowList from './components/FollowList.vue';
import placeOrder from './components/PlaceOrder.vue';
import { collectGroups, collectUsers } from './utils';

const props = defineProps(['platform']);

const orderStore = useOrderStore();
const { setGroups, setAccount, setPlatforms } = orderStore;

type GroupType = {
  id: string;
  name: string;
};
const groupList = ref<GroupType[]>([]);
const tradeGroup = ref([]);

interface IPlatformType {
  id: number;
  name: string;
}
const currentPlatform = ref({} as IPlatformType);
const getPlatformList = async () => {
  const platformList = await reqPlatformList();
  setPlatforms(platformList.list);
  const current = platformList.list.find(
    (item: IPlatformType) => item.name === props.platform,
  );
  currentPlatform.value = current;

  getAccountList(current.id);
};

const getGroupList = async () => {
  const groupList = await reqGroupList();
  const temp_groups = collectGroups(groupList.list);

  if (orderStore.groups.length > 0) {
    const updateGroups = temp_groups.map((item) => {
      const oldGroup = orderStore.groups.find(
        (oldItem) => oldItem.id === item.id,
      );
      if (oldGroup) {
        item.disabledA = oldGroup.disabledA;
        item.disabledB = oldGroup.disabledB;
      }
      return item;
    });
    setGroups(updateGroups);
  } else {
    setGroups(temp_groups);
  }
  // setGroups(temp_groups);
};

const getAccountList = async (cur_platform_id: number) => {
  const accountList = await reqAccountList({ platform_id: cur_platform_id });
  const accounts = collectUsers(accountList.list);

  if (orderStore.users.length > 0) {
    // 如果 store中的users不为空， 则把请求回来的users 与 store中的users进行对比，保留最新的user，并且把新的users中有的数据
    // 而且在 store 的 users 中的数据的 disabledA 和 disabledB，同步到 新的 users 中
    // 以新的users 为准，然后取出 新旧相同部分的 disabledA 和 disabledB， 赋值给 新的users
    const updateUsers = accounts.map((item) => {
      const oldUser = orderStore.users.find(
        (oldItem) => oldItem.id === item.id,
      );
      if (oldUser) {
        item.disabledA = oldUser.disabledA;
        item.disabledB = oldUser.disabledB;
      }
      return item;
    });
    setAccount(updateUsers);
  } else {
    setAccount(accounts);
  }
  // setAccount(accounts);
};

const newInit = () => {
  getGroupList();
  getPlatformList();
};

/** onActivated：进入页面时会触发。
 *  当组件初次加载时会执行onMounted与onActivated，
 * 当从别的页面跳转到指定页面时，
 * 只有onActivated会被触发
 * 所以，这个页面的 初始化逻辑可以放在onActivated中
 * 这样可以避免在onMounted中执行两次
 */
// newInit();

onActivated(() => {
  newInit();
});
</script>

<template>
  <div title="" description="">
    <div class="dashboard-container">
      <el-row>
        <!-- <div class="account-list">
          <accountList
            @socket="handleSocket"
            @refresh-group="refreshGroup"
            :platform="currentPlatform"
          />
        </div> -->
        <el-col :span="13">
          <placeOrder
            v-if="currentPlatform.id"
            :group-list="groupList"
            :trade-group="tradeGroup"
            :platform="currentPlatform"
          />
        </el-col>
      </el-row>
      <FollowList v-if="currentPlatform.id" :platform="currentPlatform" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.dashboard-container {
  width: 100%;
  min-width: 1180px;

  // .account-list {
  //   width: calc(100% - 730px);
  // }
}
</style>
